<template>


  <div>

    <el-button  type="primay" plain @click="grant()">授权</el-button>

    <el-table
        :data="tableData"
        style="width: 100%" border
        size="mini"
        @selection-change="tableSelection"
    >


      <el-table-column
          align="center"
          label="序号"
          type="selection"

      >
      </el-table-column>


      <el-table-column align="center"
                       prop="roleName"
                       label="角色名称"
      >
      </el-table-column>

      <el-table-column align="center"
                       prop="roleSort"
                       label="显示顺序"
      >
      </el-table-column>





      <el-table-column align="center"
                       prop="roleKey"
                       label="角色权限字符串"
      >
      </el-table-column>

      <el-table-column align="center"
                       prop="status"
                       label="角色状态"
      >
      </el-table-column>


    </el-table>



  </div>

</template>


<script>
import request from "@/utils/request";

export default {
  name: 'UserRole',
  props:['userId'],
  data() {
    return {
      tableData:[],
      roleIds:[]
    }
  },
  methods: {
     loadList(){
       request({
         method: 'get',
         url: '/sysRole/list',
       }).then(tableData => {
         //res axios封装的结果
         this.tableData =tableData;
       })
     },
    //记录那些角色被选中
    tableSelection(selection){
        console.log("selection",selection)
        this.selection = selection;
        this.roleIds = [];


        //获取所有的 角色ID
        if(selection && selection.length>0){
          selection.forEach((item)=>{
            this.roleIds.push(item.roleId);
          })

        }
    },
    //授权 将当前的选中的角色 ids 和用户ID 存到中间表
    grant(){
        console.log("   this.roldIds",   this.roleIds)
        console.log("   this.userId",   this.userId)

      //        return count == roleIds ;

      request({
        method: 'post',
        url: '/sysUser/grant',
        data:{
          userId:this.userId,
          roleIds:this.roleIds
        }
      }).then(succes => {
        if(succes){
          this.$message({
            type:'success',
            message:'授权成功'
          })
          //关闭当前的gialog
          this.$emit("update:dialogVisible1",false)
        }
      })

    }
  },
  created() {
    //加载所有的角色列表
    this.loadList();
  },
  mounted() {


  }


}
</script>


<style>

</style>


